<template>
  <el-select-v2
    v-model="formData[data.field]"
    :options="choices"
    :placeholder="data.placeholder ? data.placeholder : '请选择'"
    filterable
    clearable
    collapse-tags
    :disabled="data.disabled"
    :multiple="data.multiple"
    @change="searchFun"
  />
</template>
<script lang="ts">
/**
 * option选项默认为label(string)、value
 */
import { defineComponent, computed } from 'vue'
import { baseForm } from '@/common/mixins/index'

export default defineComponent({
  name: 'BaseDropdown',
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['onSearchFun', 'update:form'],
  setup(props, { emit }) {
    const formData = computed({
      get: () => props.form,
      set: (val) => emit('update:form', val)
    })

    const choices = computed({
      get: () => {
        if (props.data.defaultProps && props.data.choices) {
          return props.data.choices.map((item: any) => {
            return {
              label: item[props.data.defaultProps.label],
              value: item[props.data.defaultProps.value]
            }
          })
        } else {
          return props.data.choices || []
        }
      },
      set: (val) => {
        console.log(val)
      }
    })

    const searchFun = () => {
      baseForm.searchFun(emit)
    }

    return { searchFun, formData, choices }
  }
})
</script>

<style lang="stylus" scoped></style>
